<template>
  <div class="container">
    <div class="form-content">
      <a-form layout="inline">
        <a-form-item label="时间范围">
          <a-range-picker v-model:value="data" />
        </a-form-item>
        <a-form-item label="邀约状态">
          <a-select
            allowClear
            v-model:value="invitationStatus"
            style="width: 200px"
            placeholder="请选择职位标签"
            :options="statusList"
            @change="handleChange"
          ></a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" class="search-botton" @click="search">搜索</a-button>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-content">
      <a-table
        class="table"
        :columns="columns"
        :data-source="positionListStore.positionList"
        :loading="positionListStore.loading"
        :scroll="{ x: 1500, y: 650 }"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <div v-if="column.key === 'operation'">
            <a-button type="link" size="small" @click="handleAddApplication(record)">投递</a-button>
          </div>
        </template>
      </a-table>
    </div>
  </div>
  <a-modal
    v-model:open="open"
    :body-style="bodyStyle"
    title="投递当前职位"
    @ok="addApplication"
    centered
  >
    <a-form :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="用户名">
        <a-input v-model:value="form.userName" disabled />
      </a-form-item>
      <a-form-item label="邮箱">
        <a-input style="width: 200px" v-model:value="form.email" disabled />
      </a-form-item>
      <a-form-item label="手机号码">
        <a-input v-model:value="form.telNum" disabled />
      </a-form-item>
      <a-form-item label="性别">
        <!-- <a-input v-model:value="form.sex" disabled /> -->
        <span style="padding-left: 11px" v-if="form.sex === 0">男</span>
        <span style="padding-left: 11px" v-if="form.sex === 1">女</span>
      </a-form-item>
      <!-- 毕业院校 -->
      <a-form-item label="年龄">
        <a-input v-model:value="form.age" disabled />
      </a-form-item>
      <a-form-item label="毕业院校">
        <a-input v-model:value="form.bg" disabled />
      </a-form-item>
      <!-- 专业 -->
      <a-form-item label="专业">
        <a-input v-model:value="form.major" disabled />
      </a-form-item>
      <a-form-item label="身份">
        <a-input v-model:value="form.gen" disabled />
      </a-form-item>
      <a-form-item label="绩点">
        <a-input v-model:value="form.gpa" disabled />
      </a-form-item>
      <a-form-item label="个人链接">
        <a-input v-model:value="form.link" disabled />
      </a-form-item>
      <a-form-item label="当前所在地">
        <a-input v-model:value="form.location" disabled />
      </a-form-item>
      <a-form-item label="描述">
        <a-input v-model:value="form.description" disabled />
      </a-form-item>
      <a-form-item label="期望岗位">
        <a-input v-model:value="form.jobIntention" disabled />
      </a-form-item>
      <a-form-item label="工作地">
        <a-input v-model:value="form.workLocation" disabled />
      </a-form-item>
      <a-form-item label="其他">
        <a-input v-model:value="form.others" disabled />
      </a-form-item>
      <a-form-item label="论文">
        <a-input v-model:value="form.paper" disabled />
      </a-form-item>
      <!-- 教育背景 -->
      <a-form-item label="教育背景">
        <a-input v-model:value="form.degree" disabled />
      </a-form-item>

      <!-- 简历附件 -->
      <a-form-item label="简历附件">
        <div style="display: flex">
          <a-input v-model:value="form.resumeFileName" disabled></a-input>
          <a-button type="link" @click="previewCv()">预览</a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useInvitationStore } from '@/stores/invitationStore'
import { usePositionListStore } from '@/stores/positionListStore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import server from '@/api/index'
import dayjs from 'dayjs'

const bodyStyle = {
  maxHeight: '600px',
  overflow: 'auto',
}
const store = useInvitationStore()
const userStore = useUserStore()
const positionListStore = usePositionListStore()

const columns = [
  {
    title: '公司ID',
    dataIndex: 'companyId',
    key: 'companyId',
    width: 150,
    fixed: 'left',
  },
  {
    title: '公司名称',
    dataIndex: 'companyName',
    key: 'companyName',
    width: 150,
    fixed: 'left',
  },
  {
    title: '职位ID',
    dataIndex: 'positionId',
    key: 'positionId',
    width: 150,
  },
  {
    title: '职位名称',
    dataIndex: 'title',
    key: 'title',
    width: 150,
  },

  {
    title: '开始时间',
    dataIndex: 'startDate',
    key: 'startDate',
    width: 150,
  },
  {
    title: '结束时间',
    dataIndex: 'endDate',
    key: 'endDate',
    width: 150,
  },
  {
    title: '教育背景',
    dataIndex: 'bg',
    key: 'bg',
    width: 150,
  },
  {
    title: '应往届',
    dataIndex: 'gen',
    key: 'gen',
    width: 150,
  },
  {
    title: 'Base地',
    dataIndex: 'location',
    key: 'location',
    width: 150,
  },
  {
    title: '薪资',
    dataIndex: 'salary',
    key: 'salary',
    width: 150,
  },
  {
    title: '标签',
    dataIndex: 'tags',
    key: 'tags',
    width: 150,
  },

  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 200,
    fixed: 'right',
  },
]

const form = ref({
  userName: '',
  sex: '',
  telNum: '',
  email: '',
  bg: '',
  major: '',
  degree: '',
  gen: '',
  gpa: '',
  link: '',
  location: '',
  workLocation: '',
  description: '',
  jobIntention: '',
  others: '',
  paper: '',
  age: '',

  profileID: '',
  applicantID: '',

  campusPositionName: '',
  campusWorkTime: '',
  campusStartWorkTime: '',
  campusEndWorkTime: '',

  campusExperience: '',

  componyName: '',
  positionName: '',
  workTime: '',
  startWorkTime: '',
  endWorkTime: '',
  workExperience: '',

  projectName: '',
  projectRole: '',
  projectTime: '',
  projectStartTime: '',
  projectEndTime: '',
  projectExperience: '',

  personSkill: '',
  selfDesc: '',
  resumeFileName: '',
  path: '',
  id: '',
})
const getUserInfo = async () => {
  try {
    const res = await server.getUserInfo(userStore.userAccount)
    if (res.data.code === 0) {
      const applicant = res.data.data.applicant
      const profile = res.data.data.profile
      form.value.userName = applicant?.userName
      form.value.sex = applicant?.sex
      form.value.telNum = applicant?.telNum
      form.value.email = applicant?.email
      form.value.bg = applicant?.bg
      form.value.degree = applicant?.degree
      form.value.major = applicant?.major
      form.value.gen = applicant?.gen
      form.value.gpa = applicant?.gpa
      form.value.link = applicant?.link
      form.value.location = applicant?.location
      form.value.description = applicant?.description
      form.value.applicantID = applicant?.id
      form.value.age = applicant?.age

      form.value.personSkill = profile?.personSkill
      form.value.path = profile?.path
      form.value.selfDesc = profile?.selfDesc
      form.value.id = profile?.id
      form.value.resumeFileName = profile?.path?.slice(profile?.path.lastIndexOf('\\') + 1)
      form.value.workLocation = profile?.location
      form.value.jobIntention = profile?.jobIntention
      form.value.others = profile?.others
      form.value.paper = profile?.paper
      form.value.profileID = profile?.profileId
      form.value.campusPositionName = profile?.campusExperience?.slice(
        0,
        profile?.campusExperience.indexOf('$'),
      )
      form.value.campusStartWorkTime = profile?.campusExperience?.slice(
        profile?.campusExperience.indexOf('$') + 1,
        profile?.campusExperience.indexOf('%'),
      )
      form.value.campusEndWorkTime = profile?.campusExperience?.slice(
        profile?.campusExperience.indexOf('%') + 1,
        profile?.campusExperience.indexOf('^'),
      )
      form.value.campusExperience = profile?.campusExperience?.slice(
        profile?.campusExperience.indexOf('^') + 1,
      )
      form.value.componyName = profile?.workExperience?.slice(
        0,
        profile?.workExperience.indexOf('$'),
      )
      form.value.positionName = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('$') + 1,
        profile?.workExperience.indexOf('&'),
      )
      form.value.startWorkTime = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('&') + 1,
        profile?.workExperience.indexOf('%'),
      )
      form.value.endWorkTime = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('%') + 1,
        profile?.workExperience.indexOf('^'),
      )
      form.value.workExperience = profile?.workExperience?.slice(
        profile?.workExperience.indexOf('^') + 1,
      )
      form.value.projectName = profile?.projectExperience?.slice(
        0,
        profile?.projectExperience.indexOf('$'),
      )
      form.value.projectRole = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('$') + 1,
        profile?.projectExperience.indexOf('&'),
      )
      form.value.projectStartTime = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('&') + 1,
        profile?.projectExperience.indexOf('%'),
      )
      form.value.projectEndTime = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('%') + 1,
        profile?.projectExperience.indexOf('^'),
      )
      form.value.projectExperience = profile?.projectExperience?.slice(
        profile?.projectExperience.indexOf('^') + 1,
      )
    }
  } catch (error) {
    message.error(error)
  }
}
const previewCv = async () => {
  try {
    const res = await server.getMyProfile(userStore.userAccount)
    if (res.data.code === 0) {
      const url =
        'http://localhost:8101/api/profile/preview/' +
        res.data.data.path?.slice(res.data.data.path.lastIndexOf('\\') + 1)
      window.open(url)
    }
  } catch (error) {
    message.error(error)
  }
}

const onPageChange = async (page, pageSize) => {
  positionListStore.page = page
  positionListStore.pageSize = pageSize
  getPositionByCompany()
}
const search = async () => {
  getPositionByCompany()
}
const reset = () => {
  getPositionByCompany()
}

const getPositionByCompany = async () => {
  const res = await server.getPositionByCompany()
  if (res?.data.code === 0) {
    positionListStore.positionList = res.data.data.map(position => {
      switch (position.status) {
        case 0:
          position.status = '已创建'
          break
        case 1:
          position.status = '已发布'
          break
        case 2:
          position.status = '已暂停'
          break
        case 3:
          position.status = '已关闭'
          break
        case 5:
          position.status = '已招满'
          break
      }
      return {
        ...position,
        startDate: dayjs(position.startDate).format('YYYY/MM/DD'),
        endDate: dayjs(position.endDate).format('YYYY/MM/DD'),
      }
    })
    positionListStore.total = positionListStore.positionList.length
  } else {
    message.error(res.data.message)
  }
}

const companyId = ref('')
const companyName = ref('')
const positionId = ref('')
const positionName = ref('')
const open = ref(false)
const handleAddApplication = item => {
  open.value = true
  companyId.value = item.companyId
  companyName.value = item.companyName
  positionId.value = item.positionId
  positionName.value = item.title
  getUserInfo()
}
const addApplication = async () => {
  try {
    const res = await server.addApplication({
      companyId: companyId.value,
      companyName: companyName.value,
      positionId: positionId.value,
      positionName: positionName.value,
      userId: userStore.userAccount,
      userName: userStore.userTureName,
      profileId: form.value.profileID,
    })
    if (res?.data.code === 0) {
      message.success(res.data.message)
    } else {
      message.error(res.data.message)
    }
    open.value = false
  } catch (error) {
    message.error(error)
  }
}

onMounted(() => {
  if (!positionListStore.flag) {
    getPositionByCompany()
  }
  positionListStore.flag = false
})
</script>

<style lang="scss" scoped>
.container {
  // display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .form-content {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    .search-botton {
      margin-right: 10px;
    }
  }

  .table-content {
    padding: 15px;
  }

  .page-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }
}

:deep(.ant-input-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}
</style>
